<template>
  <div class="userbox">
    <div class="adduser">
      <el-button type="primary" @click="showcreatuser">增加用户</el-button>
    </div>
    <div class="userList" v-show="tohide">
        <el-table :data="tableData" style="width: 100%" max-height="800">
      <el-table-column fixed prop="phone" label="电话号码" width="200">
      </el-table-column>
      <el-table-column prop="userName" label="姓名" width="200"> </el-table-column>
      <el-table-column prop="passWord" label="密码" width="200">
      </el-table-column>
      <el-table-column prop="id" label="ID" width="300"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
        </template>
      </el-table-column>
    </el-table>
    </div>
    <div class="adduserbox" v-show="toshow">
      <div class="closebox" @click="hidecreateuser">x</div>
      <createuser></createuser>
    </div>
  </div>
</template>

<script>
import createuser from "../components/createuser.vue";
import {getuser,deleteuserFunc} from "../http/request";
export default {
  name: "user",
  components: {
    createuser,
  },
  data() {
    return {
        toshow: false,
      tohide: true,
      tableData: [
        // {
        //   phone: "15889889070",
        //   name: "王小虎",
        //   password: "123",
        //   id: "1b4293bf-72e3-46a9-b8a4-ba2c2e199798",
        //   address: "上海市普陀区金沙江路 1518 弄",
        //   zip: 200333,
        // },
      ],
    };
  },
  methods:{
    showcreatuser() {
      this.toshow = true;
      this.tohide = false;
    },
    hidecreateuser() {
      this.toshow = false;
      this.tohide = true;
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.deleteuser(row.id);
      this.$router.go(0);
    },
     // 获取用户列表
    async getusers() {
      await getuser("/user/userlist").then((data) => {
        console.log(data);
        this.tableData = data.result;
      });
  },
   // 删除用户
    async deleteuser(Id) {
      await deleteuserFunc("/user/deleteuser", { id: Id }).then(
        (data) => {
          console.log(data);
        }
      );
    },
  },    
  mounted(){
    this.getusers();
  }
};
</script>

<style lang="scss" scoped>
.adduserbox {
  background-color: #fff;
  position: relative;
  .closebox {
    position: absolute;
    right: 15px;
    top: 10px;
    cursor: pointer;
  }
}
</style>